<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="keywords" content="关键词">
        <meta name="description" content="描述">
        <meta name="author" content="潭州教育-阿飞老师">
        <style>
            body{font-family: "Microsoft YaHei",serif;}
            body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
            ol,ul,li{margin:0;padding:0;list-style:none;}
            img{border:none;}

            #wrap{
                width: 100%;
                height: 580px;
                background: linear-gradient(to bottom,rgb(141,193,222) 0%,rgb(249,168,134) 100%);
                user-select: none;
            }
            #content{
                width: 800px;
                height: 530px;
                margin: 0 auto;
                padding-top: 50px;
            }
            #content .left,#content .right{
                float: left;
                width: 50%;
                height: 100%;
            }
            #content .left{
                background-color: #fff;
            }
            #content .left p.title{
                font-size: 16px;
                color: #f60;
                padding: 30px 0 0 15px;
            }
            #content .left p.title span{
                font-size: 14px;
                color: #000;
                cursor: pointer;
            }
            #content .left p.title span:hover{
                color: #f00;
            }
            #content .right{
                background-color: rgba(0,0,0,.5);
            }
            #content .left .create{
                margin-left: 15px;
                margin-top: 20px;
            }
            #content .left .create p{
                float: left;
                margin-right: 15px;
                margin-bottom: 10px;
                border: 1px solid #ddd;
                padding: 5px 7px;
                color:#bbb;
            }
            #content .left .create p i:hover{
                cursor: pointer;
                color: #f00;
            }
            #content .right .create{
                padding-top: 50px;
                padding-left: 15px;
            }
            #content .right .create p{
                float: left;
                padding: 10px;
                border: 1px solid #fff;
                font-size: 14px;
                margin-right: 20px;
                margin-bottom: 10px;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="content">
                <div class="left">
                    <p class="title">
                        热门目的地：
                        <span>马来西亚</span>
                        <span>泰国</span>
                        <span>三亚</span>
                        <span>新西兰</span>
                        <span>云南</span>
                    </p>
                    <div class="create">
                        <!--<p>马来西亚 | <i>X</i></p>
                        <p>新西兰 | <i>X</i></p>-->
                    </div>
                </div>
                <div class="right">
                    <div class="create">
                        <!--<p>马来西亚</p>
                        <p>新西兰</p>-->
                    </div>
                </div>
            </div>
        </div>
        
        <script>


            (function(){
                let aSpan = [...document.querySelectorAll("#content .left .title span")],
                    oLeftCreate = document.querySelector("#wrap .left .create"),
                    oRightCreate = document.querySelector("#wrap .right .create");

                let ifAdd = [];

                //点击事件的添加
                aSpan.forEach((ele,index)=>{
                    ele.onclick = function(){
                        if( !ifAdd[index] )ifAdd[index] = {};
                        if( ifAdd[index].bool )return;
                        //生成内容
                        createLeftP(this.innerHTML,index);
                        //改变状态
                        ifAdd[index].bool = true;
                    };
                });

                //生成左侧的oP
                function createLeftP(html,index){
                    let data = ifAdd[index];

                    if( !data.oLeftP ){
                        //左侧的内容
                        data.oLeftP = document.createElement("p");

                        let txt = document.createTextNode(html + " | "),
                            oI = document.createElement("i");
                        oI.innerHTML = "X";
                        //oI的点击清除事件
                        oI.onclick = function(){
                            oLeftCreate.removeChild(data.oLeftP);
                            oRightCreate.removeChild(data.oRightP);
                            data.bool = false;
                        };
                        data.oLeftP.appendChild(txt);
                        data.oLeftP.appendChild(oI);

                        //右侧的内容
                        data.oRightP = document.createElement("p");
                        data.oRightP.innerHTML = html;
                    }

                    oLeftCreate.appendChild(data.oLeftP);
                    oRightCreate.appendChild(data.oRightP);
                }
            })();



            /*ifAdd = [
                {
                    oLeftP : oLP,
                    oRightP : oRP,
                    bool : true
                },{
                    oLeftP : oLP,
                    oRightP : oRP,
                    bool : true
                },{
                    oLeftP : oLP,
                    oRightP : oRP,
                    bool : true
                },
            ];*/


        </script>
    </body>
</html>














